<template>
    <!--常规布局 -->
    <div
        :class="{
      fixed: fixedHeader,
      'no-tabs-bar': !showTabs,
    }"
        class="vab-layout-common"
    >
        <div
            :class="{
        'fixed-header': fixedHeader,
      }"
            class="vab-layout-header"
        >
            <vab-header layout="common"/>
            <div>
                <vab-side-bar layout="common"/>
                <div
                    v-show="showTabs"
                    :class="{
            'is-collapse-main': collapse,
          }"
                    class="vab-main"
                >
                    <vab-tabs layout="common"/>
                </div>
            </div>
        </div>
        <div
            :class="{
        'is-collapse-main': collapse,
      }"
            class="vab-main main-padding"
        >
            <vab-app-main/>
        </div>
    </div>
</template>

<script lang="ts">
    import Vue from "vue";
    import {Component, Prop} from 'vue-property-decorator';
    import VabAppMain from '@/vab/components/VabAppMain/index.vue';
    import VabNav from '@/vab/components/VabNav/index.vue';
    import VabTabs from '@/vab/components/VabTabs/index.vue';
    import ColumnBar from "../VabLayoutColumn/components/ColumnBar.vue";
    import VabHead from '@/vab/components/VabHeader/index.vue';
    import VabSliderBar from '@/vab/components/VabSliderBar/index.vue';

    @Component({components: {VabAppMain, VabNav, VabTabs, ColumnBar, VabHead, VabSliderBar}})
    export default class VabLayoutCommon extends Vue {
        @Prop({type: Boolean, default: false})
        private collapse;

        @Prop({type: Boolean, default: true})
        private fixedHeader;

        @Prop({type: Boolean, default: true})
        private showTabs;

        @Prop({type: String, default: 'desktop'})
        private device;
    }
</script>

<style lang="scss" scoped>
    .vab-layout-common {
        .vab-main {
            .fixed-header {
                left: $base-left-menu-width;
                width: $base-right-content-width;
            }
        }

        ::v-deep {
            .vab-tabs-content {
                width: calc(
                    100% - 60px - #{$base-font-size-default} - #{$base-padding} - 2px
                ) !important;
            }

            .vab-header {
                .vab-main {
                    width: 100%;
                    margin: auto $base-margin;
                }
            }
        }
    }
</style>
